<template>
  <home/>
  <div class="conunt">
    <div class="table">
      <el-card :body-style="{'padding': '0px'}" style="padding: 10px">
        <el-input size="default" style="width: 200px;" v-model="form.title" placeholder="标题"/>
        <el-select
            v-model="form.type"
            style="width: 150px;margin-left: 10px;margin-right: 10px;"
            clearable placeholder="公告类型">
          <el-option label="通知" value="0"/>
          <el-option label="公告" value="1"/>
        </el-select>
        <el-button type="warning" @click="submit" :icon="Search">查询</el-button>
        <el-button type="info" @click="noForm" :icon="Refresh">重置</el-button>
      </el-card>
      <el-card :body-style="{'padding': '0px'}" style="padding: 10px;margin-top: 10px">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="系统公告" name="first"/>
          <el-tab-pane label="省市动态" name="second"/>
        </el-tabs>
        <el-table :data="tableData"
                  v-loading="loading"
                  element-loading-text="拼命加载中..."
                  :element-loading-spinner="svg"
                  element-loading-svg-view-box="-10, -10, 50, 50"
                  element-loading-background="rgba(122, 122, 122, 0.8)"
                  stripe style="width: 100%">
          <template #empty>
            <el-empty :image-size="150"></el-empty>
          </template>
          <el-table-column align="center" label="序号" min-width="20%">
            <template #default="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column align="center" label="主题" min-width="60%">
            <template @click="openCement(scope.row)" #default="scope">
              <el-button @click="openCement(scope.row)" v-if="scope.row.type===0" size="small" type="danger" round>
                通知
              </el-button>
              <el-button @click="openCement(scope.row)" v-if="scope.row.type===1" size="small" type="primary" round>
                公告
              </el-button>
              <el-button @click="openCement(scope.row)" link>{{ scope.row.title }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间" min-width="20%"/>
        </el-table>
        <div class="demo-pagination-block">
          <el-config-provider :locale="zhCn">
            <el-pagination
                v-model:current-page="currentPage2"
                v-model:page-size="pageSize"
                page-sizes="15"
                size="default"
                background="true"
                layout="total, prev, pager, next"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </el-config-provider>
        </div>
      </el-card>
    </div>
  </div>

</template>
<script setup>
import {reactive, ref} from "vue";
import home from '../welcome/Home.vue'
import {cementPage} from "../welcome/welcomeApi.js";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import {ElConfigProvider} from "element-plus";
import {Refresh, Search} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";
// 获取router 里面的query参数
const route = useRoute()
const currentPage2 = ref(1);
const pageSize = ref(15)
const title = ref('')
const value = ref('')
let tableData = ref([])
const total = ref(0)
const loading = ref(false)
const activeName = ref('first')
const form = reactive({
  title: '',
  type: '',
  status: '',
  userName: '',
  cementTypes: route.query.cementType
})
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage2.value = 1
  projectPageAll();
}
const handleCurrentChange = (val) => {
  currentPage2.value = val
  projectPageAll();
}
const submit = () => {
  projectPageAll();
}
const noForm = () => {
  form.title = "";
  form.type = "";
  projectPageAll();
}
const projectPageAll = async () => {
  loading.value = true
  await cementPage(form, pageSize.value, currentPage2.value).then(data => {
    tableData.value = data.data.records
    total.value = data.data.total
  }).finally(() => {
    loading.value = false
  });
}
const handleClick = (tab, event) => {
  if (tab.props.name === 'first') {
    form.cementTypes = 0;
  } else {
    form.cementTypes = 1;
  }
  projectPageAll();
}
const openCement = (data) => {
  // 移除无法克隆的数据，只传递 JSON 可序列化的部分
  const cloneableItem = {...data}; // 复制对象
  delete cloneableItem.someNonCloneableProperty; // 移除无法克隆的属性
  const channel = new BroadcastChannel('cementData');
  // 监听是否有其他标签页的响应
  channel.postMessage(cloneableItem); // 发送克隆后的对象
  window.open('http://localhost:3333/#/cementDetails', 'cementDetails');
  localStorage.setItem('cementData', JSON.stringify(cloneableItem))
}
onMounted(() => {
  if (route.query.cementType === '1') {
    activeName.value = 'second';
    form.cementTypes = 1;
  } else {
    activeName.value = 'first';
    form.cementTypes = 0;
  }
  projectPageAll();
})
</script>


<style scoped>
.conunt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

.table {
  width: 92%;
  align-items: center;
}

.tatle {
  display: flex;
  justify-content: center;
  color: red;
  opacity: 0.5;
  margin-top: 10px;
  margin-bottom: 30px;
}

.demo-pagination-block {
  display: flex;
  justify-content: right;
}
</style>
